jclass={
    initPage:function(){
        // 绑定dom对象
        this.obj = {
            searchText:$('#searchText'),
        };
        this.ChuliStatusArr=[
            {name:"全部",value:''},
            {name:"未处理",value:'9'},
            {name:"已处理",value:'1'},
            {name:"处理中",value:'2'},
            {name:"已处理完毕",value:'3'},
            {name:"不做处理",value:'4'},
            {name:"将来处理",value:'5'},
            {name:"逾期督办",value:'6'}
        ]
        // 声明全局变量
        this.data = {
            datatable:[],
            zTree: {},
            zNodes: [
                { id:55, pId:0, name:"随意勾选 1", open:true},
                { id:11, pId:10, name:"随意勾选 1-1", open:true},
                { id:111, pId:11, name:"随意勾选 1-1-1"},
                { id:112, pId:11, name:"随意勾选 1-1-2"},
                { id:12, pId:1, name:"随意勾选 1-2", open:true},
                { id:121, pId:12, name:"随意勾选 1-2-1"},
                { id:122, pId:12, name:"随意勾选 1-2-2"},
                { id:2, pId:0, name:"随意勾选 2", open:true},
                { id:21, pId:2, name:"随意勾选 2-1"},
                { id:22, pId:2, name:"随意勾选 2-2", open:true},
                { id:221, pId:22, name:"随意勾选 2-2-1"},
                { id:222, pId:22, name:"随意勾选 2-2-2"},
                { id:23, pId:2, name:"随意勾选 2-3"}
            ],
            tableParams: {
                alarmStatus: '',
                owersName: '',
                vehicleNo: '',
                handleBeginTime: '',
                handleEndTime: '',
                startTime: '',
                endTime: '',
                areaName: '',
                areaId:'',
                vehicleType: '',
                alarmType: '',
                delayHendlerConsume: '',
                page:1,
                size:10
            },
            tableRowSelectList: [],
            dbRowList:[],
            dbendtime: ''
        };
        this.selectedValue()
        this.getTableList();
        // this.creatTable();
        this.init();
        this.bindEvent();
    },
    init() {
        //十分年月日范围
        let that =this
        $('#datepickerTime').datePicker({
            format: 'YYYY-MM-DD HH:mm',
            isRange: true,
            hide: function (type) {
                // console.info(this.$input.eq(0).val(), this.$input.eq(1).val());
                that.data.tableParams.handleBeginTime = this.$input.eq(0).val()
                that.data.tableParams.handleEndTime = this.$input.eq(1).val()
            }
        });
        $('#datepickerAlarmtime').datePicker({
            format: 'YYYY-MM-DD HH:mm',
            isRange: true,
            hide: function (type) {
                that.data.tableParams.startTime = this.$input.eq(0).val()
                that.data.tableParams.endTime = this.$input.eq(1).val()
            }
        });
        $(".alarm-tree").hide()
        jrequest.get("/api/alarm-infos/selectAlarmTypeAll",{}).then(res => {
            console.log(res)
            jdtree.init(res.data)
        });

        $("select").prop("selectedIndex",0)
        $("select").find("option[value='0']").attr("selected", true)
         $("select").find("option").each(function() {
            $(this).removeAttr("selected");
        });

         // 地区下拉框
        this.diquSelceted();

         // 表格操作 选择，取消选择，选择全部，取消选择全部
        $("#jtable_alarmcenter").on('check.bs.table',(e,row,$element) => {
            this.data.tableRowSelectList.push(row)
        })
        $("#jtable_alarmcenter").on('uncheck.bs.table',(e,row,$element) => {
            this.data.tableRowSelectList = this.data.tableRowSelectList.filter(item => row.id != item.id)
        })
        $("#jtable_alarmcenter").on('check-all.bs.table',() => {
            this.data.tableRowSelectList = this.data.datatable
        })
        $("#jtable_alarmcenter").on('uncheck-all.bs.table',() => {
            this.data.tableRowSelectList = []
        })

        //十分年月日单个
        $('#datetime').datePicker({
            format: 'YYYY-MM-DD HH:mm'
        });

        $("#btn_db_submit").click(() => {
            var dataForm = $("#form_db").serializeArray();
            console.log(dataForm)
            let a = true
            dataForm.forEach(item => {
                if(!item.value) a=false
            })
            if(a) {
                let obj = {}
                dataForm.map((item,index) => {
                    obj[item.name] = item.value
                })
                this.submitDb(obj)
                return false
            }
            
        })
    },
    // 督办websocket
    submitDb(dataForm) {
        let data = []
        this.data.dbRowList.forEach(item => {
            let obj = {}
            obj.vehicleNo = item.vehicleNo
            obj.warnId = item.id
            obj.endTime = dataForm["d_input_time"]
            obj.level = dataForm["dbjb"]
            data.push(obj)
        })
        // console.log(data)
        jrequest.jsocket('46',data).then(res => {
            // console.log(res)
            // if (res.Msg) {
            //     JPop.alert({msg:res.Msg,type:'success'})
            // }
            closeDbDialog()
        })
    },
    bindEvent() {
        $("#highSearchdiv").hide()
        $('#highClick').unbind('click').on('click',() => {
            $("#highSearchdiv").toggle()
        });
        $("#resetClick").click(() => {
            $('.ju-select input').val("全部")
            $("select").prop("selectedIndex",0)
            // $("select").find("option[value='0']").attr("selected", true)
            $("#alarmvar").text("")
            $("#search_vehicle_no").val("")
            $(".item.rtable_input").find("input").val("")
            $("#datepickerTime input").val("")
            $("#datepickerAlarmtime input").val("")

            this.data.tableParams = {
                alarmStatus: '',
                owersName: '',
                vehicleNo: '',
                handleBeginTime: '',
                handleEndTime: '',
                startTime: '',
                endTime: '',
                areaName: '',
                areaId:'',
                vehicleType: '',
                alarmType: '',
                delayHendlerConsume: '',
                page:1,
                size:10
            }
            jdtree.setReset()
        })
        $("#searchClick").click(() => {
            let selectval = $("#clstatus option:selected").val()
            let selecttext = $("#clstatus option:selected").text()
            console.log(`val:${selectval}+text:${selecttext}`)
            this.data.tableParams.page = 1;
            this.data.tableParams.size = 10;
            // if (jdtree.getCheckIds().length) {
            //     jdtree.getCheckIds().forEach(item => {

            //     })
            // }
            this.data.tableParams.alarmType = jdtree.getCheckIds()
            this.getTableList()
        })

        $(document).click(function (event) {
            var x1 = $('#jselectMore'); // 设置目标区域
            if (!x1.is(event.target) && x1.has(event.target).length === 0) {
                $(".alarm-tree").hide()
            }
        })

        $("#jselectMore #selectimgdiv").click(() => {
            $(".alarm-tree").show();
        })

        $("#btn_dbs").click(() => {
            console.log(this.data.tableRowSelectList)
            if (this.data.tableRowSelectList && this.data.tableRowSelectList.length) {
                // 打开督办信息弹框
                openDbDialog()
                this.data.dbRowList = this.data.tableRowSelectList
            } else {
                Jdialog.alert("请至少选择一条数据。")
            }
        })
    },
    selectedValue:function(){
        let optionArr=["全部","已处理","处理中","已处理完毕","不做处理","将来处理","逾期督办"];
        let optionArr2=["全部","班车客运","旅游包车","危险品运输"];
        let optionArr3=["全部","6小时内","6小时至12小时","12小时至1天","1天至3天","3天以上"];
        this.creatId2("#clstatus",this.ChuliStatusArr);
        this.creatId("#hytype",optionArr2);
        this.creatId("#ystime",optionArr3);
    },
    creatId2:function(id,optionArr){
        $(id).html();
        var str="";
        $.each(optionArr,function (i) {
            str+=`<option value=${optionArr[i].value}>${optionArr[i].name}</option>`
        });
        $(id).html(str);
        $(id).comboSelect();
    },
    creatId:function(id,optionArr){
        $(id).html();
        var str="";
        $.each(optionArr,function (i) {
            str+="<option value='"+i+"'>"+optionArr[i]+"</option>"
        });
        $(id).html(str);
        $(id).comboSelect();
    },
    /**
     * 请求地区数据
     * */
    diquSelceted: function() {
        jrequest.get("/api/assessMent/selectByArea",{}).then(res => {
            let data = res.data
            data[0].code = 1;
            $.each(data[0].cityAreaVOS, function(i, dom) {
                data[0].cityAreaVOS[i].code = 2;
                $.each(data[0].cityAreaVOS[i].cityAreaVOS, function(j, dom) {
                    data[0].cityAreaVOS[i].cityAreaVOS[j].code = 3;
                })
            })
            this.creatMainRido("alarm_qrm_main", data, "cityAreaVOS", "code");
        })
    },
    /**
     * 下拉框
     * */
    creatMainRido: function(id, attr, child, jibie) {
        $(id).html("");
        var sttrdiv = "";
        for(var i = 0; i < 3; i++) {
            sttrdiv += "<div class='qrm-border" + (i + 1) + "' style='display:none'>" +
                "<ul class='qrm-lev-" + (i + 1) + " qrm-lev' id='qrm-border1'>" +
                "</ul>" +
                "</div>"
        };
        $(".qrm-main").html(sttrdiv);
        var str = "";
        $("#qrm-border1").html("");
        var forTree = function(o) {
            for(var i = 0; i < o.length; i++) {
                var urlstr = "";
                try {
                    urlstr = "<li><span data-id='" + o[i]["id"] + "'>" + o[i]["name"] + "</span><i class='qrm-arrow-right'></i><ul class='li-zi-" + o[i][jibie] + "' style='display: none'>";
                    str += urlstr;
                    if(o[i][child] != null) {
                        forTree(o[i][child]);
                    }
                    str += "</ul>";
                } catch(e) {}
            }
            return str;
        };
        $("#qrm-border1").html(forTree(attr));
    },
    getTableList() {
        $("#jid_loading").show()
        console.log($("#clstatus option:selected").index());
        this.data.tableParams.alarmStatus = $("#clstatus option:selected").val()
        this.data.tableParams.vehicleType = $("#hytype option:selected").index() == 0 ? "" : $("#hytype option:selected").index()
        this.data.tableParams.delayHendlerConsume = $("#ystime option:selected").index() == 0 ? "" : $("#ystime option:selected").index()
        this.data.tableParams.vehicleNo = $("#search_vehicle_no").val()
        if ($(".item.rtable_input").find("input").val()) this.data.tableParams.areaId = $(".item.rtable_input").find("input").attr("data-id")
        else this.data.tableParams.areaId = ''
        jrequest.get("/api/alarm-infos/inquiry",this.data.tableParams).then(res => {
            res.data.forEach((item,index) => {
                item.index = index + 1
            })
            this.data.datatable = res.data
            $("#jtable_alarmcenter").bootstrapTable('destroy');
            this.creatTable(res)
            // $("#jtable_alarmcenter").bootstrapTable('load',res.data);
            // $("#jtable_alarmcenter").bootstrapTable('append', res.data);
            $("#jid_loading").hide()
        })
    },
    tableEvent:function(id,data,columns,paginationShow,total){
        data.forEach(item => {
            item.Button = this.operateFormatter()
        })
        let that = this
        $('#' + id).bootstrapTable({
            method: 'get',
            cache: false,
            height: 320,
            pagination: paginationShow,
            pageSize: that.data.tableParams.size,
            pageNumber:that.data.tableParams.page,
            showColumns: true,
            striped: true,
            columns: columns,
            sidePagination: 'server', // client or server
            totalRows: total,
            data :data,
            onPageChange: function (size, number) {
                console.log(number)
                that.data.tableParams.page = number
                that.data.tableParams.size = size
                that.getTableList()
            },
            formatNoMatches: function(){
                return '暂无数据';
            }
        });
    },
    creatTable:function(res){
        var self=this;
        var columnsOne = [
            {
                title : '序号',
                align: "center",
                formatter: function (value, row, index) {
                    //获取每页显示的数量
                    var pageSize=self.data.tableParams.size;
                    //获取当前是第几页
                    var pageNumber=self.data.tableParams.page;
                    //返回序号，注意index是从0开始的，所以要加上1
                    return pageSize * (pageNumber - 1) + index + 1;
                }
            },
            {   field : 'checked',
                checkbox: true,
                width: "60"
            },
            {
              field: "vehicleNo",
              title: "车牌号码",
              visible: true
            },
            {
              field: "vehicleColor",
              title: "车牌颜色",
              visible: false
            },
            {
              field: "vehicleType",
              title: "行业类型",
              visible: false
            },
            {
              field: "alarmType",
              title: "报警类型",
              visible: true
            },
            {
              field: "alarmLevel",
              title: "报警等级",
              visible: true
            },
            {
              field: "urgeHandleLevel",
              title: "督办等级",
              visible: false
            },
            {
              field: "creatTime",
              title: "上报时间",
              visible: true
            },
            {
              field: "alarmTime",
              title: "报警时间",
              visible: true
            },
            {
              field: "startTime",
              title: "开始时间",
              visible: false
            },
            {
              field: "endTime",
              title: "结束时间",
              visible: false
            },
            {
              field: "alarmStatus",
              title: "报警处理状态",
              visible: true
            },
            {
              field: "handleTime",
              title: "报警处理时间",
              visible: false
            },
            {
              field: "delayProcessingTime",
              title: "延迟处理时长",
              visible: true
            },
            {
              field: "superviseTime",
              title: "督办时间",
              visible: false
            },
            {
              field: "headEndTime",
              title: "督办截止时间",
              visible: false
            },
            {
              field: "overdueDuration",
              title: "逾期时长",
              visible: false
            },
            {
              field: "speed",
              title: "报警速度(Km/h)",
              visible: true
            },
            {
              field: "longitude",
              title: "经度",
              visible: false
            },
            {
              field: "latitude",
              title: "纬度",
              visible: false
            },
            {
              field: "areaName",
              title: "地区",
              visible: false
            },
            {
              field: "platformName",
              title: "运营商平台",
              visible: false
            },
            {
              field: "owersName",
              title: "企业/业户",
              visible: false
            },
            {
                field: 'Button',
                title: '操作',
                width: "200",
                align: 'center',
                events: operateEvents,
            }
        ];
        self.tableEvent("jtable_alarmcenter",res.data,columnsOne,true,res.total);
    },
    operateFormatter() {
        return [
            '<button type="button" id="table_get">获取证据</button>',
            '<button type="button" id="table_db">督办</button>'
            
        ].join('');
    }
}


$(function(){
    jclass.initPage();

    // 表格操作按钮
    window.operateEvents = {
        'click #table_get': (e,value,row,index) => {
            // console.log(row)
            let data = {
                vehicleId:row.vehicleId,
                alarmId:row.id
            }
            jrequest.jsocket('56',data).then(res => {
                console.log(res)
                openGetzjDialog(res,row.alarmType)
            })
            // openGetzjDialog()
        },
        'click #table_db': (e,value,row,index) => {
            // console.log(row)
            jclass.data.dbRowList = new Array(row)
            openDbDialog()
        }
    }
});

function openDbDialog() {
    $("#dbDialog").show()
    $("#dbjb option:first").prop("selected", 'selected')

}
function closeDbDialog() {
    $("#form_db")[0].reset()
    $("#dbDialog").hide()
}

function openGetzjDialog(data,alarmType) {
    $("#getzjDialog").show()
    $("#dimg_div").hide()
    $("#dvideo_div").hide()
    $("#dfile_div").hide()
    data = data || {}
    let imgs = []
    let videos = []
    let files = []
    if(data.Body.fileList && data.Body.fileList.length) {
        data.Body.fileList.forEach(item => {
            if (item.fileType === '0') {
                imgs.push(`<img src=${item.fileName}>`)
            } else if (item.fileType === '2') {
                videos.push(`<video src=${item.fileName}></video>`)
            } else if (item.fileType === '3') {
                files.push(`<div>${item.fileName}</div>`)
            }
        })
    }
    if (imgs.length) {
        $("#dimg_div").show()
        $("#dzj_imgs").html(imgs.join(""))
    }
    if (videos.length) {
        $("#dvideo_div").show()
        $("#dzj_videos").html(videos.join(""))
    }
    if (files.length) {
        $("#dfile_div").show()
        $("#dzj_file").html(files.join(""))
    }
    $("#dspan_vehicle_no").text(data.Body.vehicleNo)
    $("#dspan_alarm_type").text(alarmType)
}

function closeGetzjDialog() {
    $("#getzjDialog").hide()
}

function liClick() {
    if (!$('.select-option-ul-next').length) {
        let ul = `<ul class="select-option-ul-next">${window.qhtmlnextli}</ul>`
        $("#jselectMore").append(ul)
    }
}
function linextClick() {
    if (!$('.select-option-ul-next-3').length) {
        let ul = `<ul class="select-option-ul-next-3">${window.qhtmlnext3li}</ul>`
        $("#jselectMore").append(ul)
    }
}

function jtest() {
    let alerttypeList = [
        {
            id:'1',
            label:'一级1',
            data:[
                {id:'1-1',label:'二级1',islast:false,data:[{id:'1-1-1',label:'三级1',islast:true},{id:'1-1-2',label:'三级2',islast:true}]},
                {id:'1-2',label:'二级2',islast:true,data:[]},
                {id:'1-3',label:'二级3',islast:true,data:[]}],
            islast:false
        },
        {
            id:'2',
            label:'一级2',
            data:[],
            islast:true
        }
    ]
    window.qhtmlli = ''
    window.qhtmlnextli = ''
    window.qhtmlnext3li = ''
    alerttypeList.forEach((item) => {
        let htmlli = '',htmlnextli = '',htmlnext3li = ''
        if (!item.islast) {
            htmlli = `<li onclick="liClick()"><input type="checkbox"><label>${item.label}</lable><span>></span></li>`
            item.data.forEach(child => {
                let childli = ''
                if (!child.islast) {
                    childli = `<li onclick="linextClick()"><input type="checkbox"><label>${child.label}</lable><span>></span></li>`
                    child.data.forEach(ev => {
                        let evli = ''
                        if (!ev.islast) {
                            evli = `<li><input type="checkbox"><label>${ev.label}</lable><span>></span></li>`
                        } else {
                            evli = `<li><input type="checkbox"><label>${ev.label}</lable></li>`
                        }
                        htmlnext3li += evli
                    })
                } else {
                    childli = `<li><input type="checkbox"><label>${child.label}</lable></li>`
                }
                htmlnextli += childli
            })
        } else {
            htmlli = `<li><input type="checkbox"><label>${item.label}</lable></li>`
        }
        window.qhtmlli += htmlli
        window.qhtmlnextli += htmlnextli
        window.qhtmlnext3li += htmlnext3li
    })
    let ul = `<ul class="select-option-ul" style="display:none;">${window.qhtmlli}</ul>`;
    $("#jselectMore").append(ul)
    $("#selectimgdiv").click(function(){
        $("#jselectMore ul").toggle();
    })
}
















